import 'package:aero_frisbee/gen/assets.gen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'pages/followed/af_followed_list_screen.dart';
import 'pages/message/af_conversation_list_screen.dart';

final tabIndexProvider = StateProvider.autoDispose<int>((ref) {
  return 0;
});

class AfMessagePage extends ConsumerStatefulWidget {
  const AfMessagePage({super.key});
  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _AfMessagePageState();
}

class _AfMessagePageState extends ConsumerState<AfMessagePage>
    with TickerProviderStateMixin {
  late TabController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leadingWidth: 0,
        title: Stack(
          children: [
            Positioned(
              left: 10,
              bottom: 0,
              child: Visibility(
                visible: ref.watch(tabIndexProvider) == 0,
                child: Assets.icons.icnoIndicatorLogo.image(width: 100),
              ),
            ),
            Positioned(
              left: 100,
              bottom: 0,
              child: Visibility(
                visible: ref.watch(tabIndexProvider) == 1,
                child: Assets.icons.icnoIndicatorLogo.image(width: 100),
              ),
            ),
            TabBar(
              dividerColor: Colors.transparent,
              labelColor: const Color(0xff202020),
              controller: _controller,
              labelPadding: const EdgeInsets.symmetric(horizontal: 0),
              unselectedLabelColor: const Color(0xff000000).withOpacity(0.3),
              labelStyle:
                  const TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
              unselectedLabelStyle:
                  const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
              isScrollable: true,
              indicator: const BoxDecoration(
                // 将指示器高度设置为 0，从而隐藏指示器
                border: Border(
                  bottom: BorderSide(color: Colors.transparent, width: 0.0),
                ),
              ),
              indicatorColor: Colors.transparent,
              tabs: const [
                Tab(
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 12),
                    child: Text(
                      'Messages',
                    ),
                  ),
                ),
                Tab(
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 12),
                    child: Text(
                      'Followed',
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _controller,
        children: const <Widget>[
          AfConversationListScreen(),
          AfFollowedListScreen(),
        ],
      ),
    );
  }

  @override
  void initState() {
    _controller = TabController(
        initialIndex: 0,
        length: 2,
        vsync: this,
        animationDuration: const Duration(milliseconds: 10));
    _controller.addListener(() {
      ref.read(tabIndexProvider.notifier).state = _controller.index;
    });
    super.initState();
  }

  @override
  void didUpdateWidget(AfMessagePage oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }
}
